<template>
  <div class="register_container">
    <h1 align="center">Welcome to Fitness</h1>
    <div class="register_box">
      <el-form :model="ruleform" status-icon :rules="rules" ref="ruleform" label-width="0px" class="demo-ruleform">
        <h2 align="center">注册</h2>
        <el-form-item label="" prop="name">
          <!-- 用户名 -->
          <el-input type="text" prefix-icon="el-icon-user" v-model="ruleform.name" autocomplete="off" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="" prop="email">
          <!-- 邮箱 -->
          <el-input type="text" prefix-icon="el-icon-message" v-model="ruleform.email" autocomplete="off" placeholder="邮箱"></el-input>
        </el-form-item>
        <!-- 邮箱验证 -->
        <el-form-item label="" prop="pass">
          <!-- 密码 -->
          <el-input  prefix-icon="el-icon-lock" type="password" v-model="ruleform.pass" autocomplete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="" prop="check_pass">
          <!-- 确认密码 -->
          <el-input prefix-icon="el-icon-lock" type="password" v-model="ruleform.check_pass" autocomplete="off" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item label="" prop="phone">
          <el-input type="text" prefix-icon="el-icon-phone" v-model="ruleform.phone" autocomplete="off" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item class="register_btn">
          <el-button type="primary" @click="submitForm('ruleform')">注册</el-button>
          <el-button @click="resetForm('ruleform')">清空</el-button>
          <p style="color: white;" @click="getlogin()">已有账号，去登录吧</p>
        </el-form-item>
      </el-form>
    </div>
  </div>
  
</template>

<script>
  import { register } from '../../api/user.js'
  export default {
    data() {
      // 密码验证规则
      var validatePass = (rule, value, callback) => {
        var reg = /^[a-zA-Z0-9_]{6,18}$/;
        if (value === '') {
          callback(new Error('请输入密码'));
        }else if (!reg.test(value)){
          callback(new Error('密码位数不能少于6位多于18位'));
        }else {
          if (this.ruleform.check_pass !== '') {
            this.$refs.ruleform.validateField('checkPass');
          }
          callback();
        }
      };
      // 用户名验证规则
      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          callback();
        }
      };
      // 邮箱验证规则
      var validateEmail = (rule, value, callback) => {
        var reg = /^[a-zA-Z0-9.]\w+@[a-zA-Z0-9]+\.[a-zA-Z]+$/;
        if (value === '') {
          callback(new Error('请输入邮箱'));
        }else if (!reg.test(value)){
          callback(new Error('请输入正确的邮箱格式'));
        }else {
          callback();
        }
      };
      // 确认密码验证规则
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleform.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };  
      // 验证手机号码
      var validatePhone = (rule,value,callback) => {
        var reg = /^1[0-9]{10}$/;
        if (value === '') {
          callback(new Error('请再次输入电话号码'));
        }else if (!reg.test(value)){
          callback(new Error('请输入正确的手机号码格式'));
        }else {
          callback();
        }
      };
      return {
        // 绑定的数据
        ruleform: {
          name: '',
          pass: '',
          check_pass: '',
          email: '',
          phone: '',
        },
        // 绑定prop的各种规则
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          check_pass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          name: [
            { validator: validateName,trigger: 'blur' }
          ],
          email: [
            { validator: validateEmail, trigger: 'blur' }
          ],
          phone: [
            { validator: validatePhone, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      getlogin() {
        this.$router.push({'name': 'login'})
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            register(
                this.ruleform.name,this.ruleform.check_pass,this.ruleform.email,this.ruleform.phone
              ).then((response) => {
                console.log(response)
                if (response.data.status_code == 10000){
                  alert('注册成功，快去登录吧！');
                this.$router.push({
                    path: '/login/',
                })
              }
            }).catch(
          err => {
            alert("注册失败")
            console.log("出错了")
            console.log(err)
          }
        )}
           else {
            console.log('登录失败，看看控制台吧！');
            return false;
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style type="text/css">
  h1 {
      font-size: 45px;
      font-weight: 500;
      letter-spacing: 4px;
      margin: 60px 0;
      color: #FFFFFF;
      align: center;
  }
  h2 {
    color: #FFFFFF;
    align: center;
  }
  .register_container {
    background-image: url("../../assets/images/login/b2.jpg");
    height: 100%;
    width: 100%;
    position: absolute;
  }
  .register_box {
    width: 30%;
    height: 60%;
    /* border-radius: 3px; */
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -60%);
    padding: 40px;
    background-color: rgba(10, 10, 10, 0.25);
    border: 2px ridge rgba(238, 238, 238, 0.13);
    border-radius: 5px;
    -moz-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
    -webkit-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
    box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
    border-bottom: none;
    border-bottom-left-radius: initial;
    border-bottom-right-radius: initial;
  }
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -62%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
  .demo-ruleform {
    position: absolute;
    bottom: 0;
    width: 80%;
    padding: 0 ,20px;
    box-sizing: border-box;
  }
  .register_btn {
    display: flex;
    justify-content: flex-end;
  }
</style>